<template>
    <div class="ad">
        <Position :navList="navList"/>
        <div class="title">
            <div class="item">
                <el-button type="primary" @click="upload">上传</el-button>
            </div>
            <div class="item">
                <el-input placeholder="名称" v-model="search_value" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                </el-input>
            </div>
        </div>
        <div class="cont">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="ID"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="address" label="资源"></el-table-column>
                <el-table-column prop="address" label="类型"></el-table-column>
                <el-table-column prop="address" label="文件大小"></el-table-column>
                <el-table-column prop="address" label="创建时间"></el-table-column>
                <el-table-column prop="address" label="描述"></el-table-column>
                <el-table-column prop="address" label="审核意见"></el-table-column>
                <el-table-column prop="address" label="播放时长"></el-table-column>
                <el-table-column prop="address" label="状态"></el-table-column>

            </el-table>
            
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100]"
                :page-size="10"
                layout="sizes, prev, pager, next"
                :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import Position from '../../components/position.vue'
export default {
    components:{
        Position
    },
    data() {
        return {
            navList:[{
                name:'广告管理',
                url:''
            }],
            search_value:null,//搜索imei
            tableData:[],
            total:0,//总条目数
            
        };
    },
    mounted(){
    },
    methods:{
        //页面展示数据数量变化时
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //翻页时
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //上传
        upload(){
            this.$router.push('/ad/detail')
        },
        //点击上传按钮
        search(){
            console.log('搜索-----')
        }
    }
}
</script>
<style lang="scss" scoped>
    .ad{
        .title{
            
            padding: 15px;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item{
                display: flex;
                .key{
                    width: 100px;
                    font-size: 14px;
                    line-height: 30px;
                    text-align: center;
                }
            }
        }
        .cont{
            padding: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background-color: #fff;
            .btn{
                margin: 10px 0;
                text-align: left;
            }
        }
        
        
    }
</style>